<template>
    <div class="layout-body">
        <div class="w-full flex flex-col items-center h-full" :class="diyData.style === 'beauty' ? '' : 'justify-center'">
            <div v-if="diyData.style === 'beauty'" class="grid gap-y-6 mt-10" :class="{ active: activeTab === 'quick'}" @click="emits('change', 'quick')">
                <!-- 头部 -->
                <div class="website-topic">
                    <el-image
                        v-if="diyTopic.logo"
                        :src="diyTopic.logo"
                        class="w-[58px] h-[58px]"
                    />
                    <div class="grid gap-1.5">
                        <h2 v-if="diyTopic.title" class="text-5xl font-bold leading-tight">
                            {{ diyTopic.title }}
                        </h2>
                        <p v-if="diyTopic.intro" class="line-clamp-1">
                            {{ diyTopic.intro }}
                        </p>
                    </div>
                    <div v-if="!diyTopic.isEnable" class="mask-layer">
                        <icon name="el-icon-Hide" :size="22" />
                    </div>
                </div>

                <!-- 内容 -->
                <div class="website-quick">
                    <template v-for="(item, index) in diyQuick">
                        <!-- 链接 -->
                        <div v-if="item.layout === 'link'" class="panel-card-link" :key="index">
                            <h6 class="text-2xl font-bold">{{ item.name }}</h6>
                            <p class="mt-2 text-xs text-tx-placeholder">{{ item.intro }}</p>
                            <div class="mt-1.5">
                                <div v-for="(t, i) in item.lists" :key="i" class="link-item">
                                    <em>{{ i + 1 }}</em>
                                    <span class="text-xl text-tx-regular line-clamp-1">{{ t.name }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 按钮 -->
                        <div v-if="item.layout === 'twig'" class="panel-card-twig" :key="index">
                            <h6 class="text-2xl font-bold">{{ item.name }}</h6>
                            <p class="mt-1.5 text-xs text-tx-placeholder">{{ item.intro }}</p>
                            <div class="mt-5">
                                <div v-for="(d, i) in item.lists" :key="i" class="twig-item">
                                    <el-image
                                        v-if="d.icon"
                                        :src="d.icon"
                                        class="w-[20px] h-[20px]"
                                    />
                                    <em class="line-clamp-1">{{ d.name }}</em>
                                    <span class="line-clamp-1">{{ d.intro }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 应用 -->
                        <div v-if="item.layout === 'apply'" class="panel-card-apply" :key="index">
                            <div v-for="(d, i) in item.lists" :key="i" class="apply-item">
                                <div>
                                    <h6 class="text-2xl font-bold line-clamp-1">{{ d.name }}</h6>
                                    <p class="mt-2 text-xs text-tx-placeholder">{{ d.intro }}</p>
                                </div>
                                <div v-if="d.button" class="button line-clamp-1">
                                    {{ d.button }}
                                </div>
                            </div>
                        </div>
                    </template>

                    <div v-if="diyQuick.length <= 0" class="w-[600px] h-[350px]"></div>
                </div>
            </div>

            <div v-else
                 class=" size-full flex justify-center items-center"
                 :class="{ active: activeTab === 'quick'}"
                 @click="emits('change', 'quick')"
            >
                <div class="max-w-2xl -translate-y-24 w-full flex justify-center flex-col items-center gap-3">
                    <h1 v-if="diyTopic.title || diyTopic.logo" class="text-5xl font-bold flex items-center gap-4">
                        <el-image
                            v-if="diyTopic.logo"
                            :src="diyTopic.logo"
                            class="w-[34px] h-[34px]"
                        />
                        <span v-if="diyTopic.title">{{ diyTopic.title }}</span>
                    </h1>
                    <p v-if="diyTopic.intro" class="line-clamp-1 text-tx-regular">
                        {{ diyTopic.intro }}
                    </p>
                    <div class="input-simple">
                        <el-input
                            type="textarea"
                            placeholder="请输入问题（Shift + Enter）= 换行"
                            :autosize="{ minRows: 2, maxRows: 20 }"
                            resize="none"
                        />

                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="tool-button">
                                    <icon name="svg-icon-WebSearch" :size="14" />
                                    <span>联网搜索</span>
                                </div>
                            </div>

                            <el-button
                                class="sender"
                                type="primary"
                                size="default"
                                :disabled="true"
                            >
                                <icon  name="el-icon-Promotion" :size="16" />
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { TopicType, QuickType } from '../index.ts'

const props = defineProps({
    activeTab: {
        type: String,
        default: ''
    },
    diyData: {
        type: Object,
        default: () => ({
            topic: {} as TopicType,
            quick: [] as QuickType[]
        })
    }
})

const emits = defineEmits(['change'])

const diyTopic = ref<TopicType>({} as TopicType)
const diyQuick = ref<QuickType[]>([] as QuickType[])

watch(
    () => props.diyData,
    (val) => {
        diyTopic.value = val.topic || {}
        diyQuick.value = val.quick || []
    }, {
        immediate: true
    }
)
</script>

<style scoped lang="scss">
.layout-body {
    min-width: 960px;
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    background-color: var(--el-bg-color);
    .active {
        border: 1px dashed var(--el-color-primary) !important;
    }

    .website-topic {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 2px;
        border: 1px dashed transparent;
        cursor: pointer;
        border-radius: 4px;
        min-height: 50px;
    }

    .website-quick {
        position: relative;
        display: flex;
        gap: 12px;
        align-items: stretch;
        padding: 2px;
        border: 1px dashed transparent;
        border-radius: 4px;
        .panel-card-twig {
            width: 300px;
            padding: 16px;
            border-radius: 12px;
            background: linear-gradient(to right, #e3e7ff, #f5f0fc,  #f5f0ff);
            border: 1px dashed transparent;
            cursor: pointer;
            .twig-item {
                gap: 10px;
                padding: 0 15px;
                margin-bottom: 12px;
                height: 50px;
                display: flex;
                align-items: center;
                background: rgba(255, 255, 255, 0.6);
                backdrop-filter: blur(10px);
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                em {
                    font-size: 16px;
                    font-style: normal;
                    font-weight: bold;
                }
                span {
                    color: var(--el-text-color-placeholder);
                }
                &:last-child {
                    margin-bottom: 0;
                }
                &:hover {
                    cursor: pointer;
                    background: rgba(255, 255, 255, 0.4);
                }
            }
        }

        .panel-card-link {
            padding: 16px 16px 10px;
            width: 300px;
            border-radius: 12px;
            border: 1px dashed transparent;
            background: linear-gradient(to right, #eaf5ff, #edeffe, #f1ebff);
            cursor: pointer;
            .link-item {
                padding: 14px 0;
                display: flex;
                align-items: center;
                gap: 12px;
                cursor: pointer;
                em {
                    font-size: 15px;
                    font-weight: bold;
                    font-style: normal;
                    color: var(--el-text-color-secondary);
                }
                &:nth-child(1) em {
                    color: #f14b5b;
                }
                &:nth-child(2) em {
                    color: #ee7073;
                }
                &:nth-child(3) em {
                    color: #f8a253;
                }
                &:hover {
                    cursor: pointer;
                    opacity: .8;
                }
            }
        }

        .panel-card-apply {
            display: grid;
            gap: 15px;
            border: 1px dashed transparent;
            cursor: pointer;
            border-radius: 12px;
            .apply-item {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 300px;
                padding: 16px;
                border-radius: 12px;
                background: linear-gradient(to right, #f1f4ff, #f3f1ff, #e8f0fd);
                .button {
                    margin-top: 20px;
                    background-color: #ffffff;
                    border-radius: 50px;
                    text-align: center;
                    padding: 10px 0;
                    box-shadow: 0 5px 40px 0 rgb(0 0 0 / 15%);
                    &:hover {
                        cursor: pointer;
                        opacity: .8;
                    }
                }
            }
        }
   }

    .mask-layer {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 2px;
        &:hover {
            background-color: rgba(0, 0, 0, 0.4);
        }
    }
}

.input-simple {
    position: relative;
    flex: 1;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--el-border-color-light);
    border-radius: 18px;
    :deep(.el-textarea.is-disabled) {
        .el-textarea__inner {
            background-color: unset;
        }
    }
    :deep(.el-textarea__inner) {
        height: 80px !important;
        min-height: 80px !important;
        box-shadow: none;
        &:focus,
        &:hover {
            box-shadow: none;
        }
    }
    .sender {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        .el-icon.is-loading {
            margin-right: -8px;
        }
    }
    .tool-button {
        display: flex;
        gap: 5px;
        align-items: center;
        padding: 10px 12px;
        line-height: 1;
        color: var(--el-text-color-regular);
        cursor: pointer;
        border: 1px solid var(--el-border-color-light);
        border-radius: 10px;
        &:hover {
            background-color: var(--el-bg-color-page);
        }
        &.active {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-9);
            border-color: var(--el-color-primary);
        }
    }
}
</style>